import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import autoprefixer from 'autoprefixer';
import path from 'path';

function testHookPlugin() {
  return {
    name: 'test-hooks-plugin',

    /*
     * @desc vite独有钩子
     * @state 在解析 vite 配置前调用
     */
    config(config) {
      console.log('config');
    },

    /*
     * @desc vite独有钩子
     * @state 在解析 vite 配置后调用。
     */
    configResolved(resolvedCofnig) {
      console.log('configResolved');
    },

    /*
     * @desc 通用钩子
     * @state 服务器启动的时候调用
     */
    options(opts) {
      console.log('options');
      return opts;
    },

    /*
     * @desc vite独有钩子
     * @state 钩子将在内部中间件被安装前调用，所以自定义的中间件将会默认会比内部中间件早运行
     */
    configureServer(server) {
      console.log('configureServer');
      setTimeout(() => {
        // 手动退出进程
        process.kill(process.pid, 'SIGTERM');
      }, 3000)
    },

    /*
     * @desc 通用钩子
     * @state 服务器启动的时候调用
     */
    buildStart() {
      console.log('buildStart');
    },

    /*
     * @desc 通用钩子
     * @state 在服务器关闭时被调用
     */
    buildEnd() {
      console.log('buildEnd');
    },

    /*
     * @desc 通用钩子
     * @state 在服务器关闭时被调用
     */
    closeBundle() {
      console.log('closeBundle');
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  root: path.resolve(__dirname, 'src'),
  plugins: [react(), testHookPlugin()],
  css: {
    modules: {
      // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
      // 其中，name 表示当前文件名，local 表示类名
      scopeBehaviour: 'local',
      generateScopedName: "[name]__[local]___[hash:base64:5]"
    },
    // 进行 PostCSS 配置
    postcss: {
      plugins: [
        autoprefixer({
          // 指定目标浏览器
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  },
  // optimizeDeps: {
  //   exclude: ['lodash-es']
  // }
})
